【CSS】border-top-left-radius - 境界線の左上角の曲線

CSSのborder-top-left-radiusプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-top-left-radius

border-top-left-radiusは“境界線の左上角の曲線”のプロパティです。

基本構文

border-top-left-radius: 水平の軌道長半径 垂直の軌道長半径;

値が１個のみの場合、水平と垂直の軌道長半径の両方に適用します。

サンプル

値：１個

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-top-left-radius: 40px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

値：２個

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    ___ih_hl_start
    border-top-left-radius: 20px 40px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー